<template>
    <main>
        <div class="top-wrapper">
            <div class="side"><Side/></div>
            <div class="editors">
                <Editor title="C source code" lang="cpp" />
                <Editor title="Generated Rust source code" lang="rust" />
            </div>
        </div>
        <Operations/>
    </main>
</template>

<script setup lang="ts">
    import Editor from '@/components/Editor.vue';
    import Operations from '@/components/Operations.vue';
    import Side from '@/components/Side.vue';
</script>


<style scoped>
    main {
        height: 100vh;
    }

    .top-wrapper {
        display: flex;
        align-items: start;
        justify-content: space-between;
        flex-direction: row;
        height: calc(100vh - 38px);
        min-height: 512px;
        flex: 1;
    }

    .editors {
        width: 82%;
        height: 100%;
        display: flex;
        align-items: start;
        justify-content: space-between;
        flex-direction: row;
        flex: 1;
    }

    .side {
        width: 18%;
        height: 100%;
        background-color: #21222c;
    }
</style>